<template>
	<view class="container">
		<uni-nav-bar title="自营入库" fixed statusBar :border="false" height="88rpx" left-icon="left" @clickLeft="onClickLeft" right-icon="plus"
			@clickRight="addFbInwarehouse"></uni-nav-bar>
		<scroll-view :style="{height:`calc(100vh - 88rpx - ${statusBarHeight}px)`}" style="overflow: hidden;" scroll-y enhanced :show-scrollbar="false"
			:scroll-with-animation="true" refresher-enabled @refresherrefresh="pulldownRefresh" :refresher-triggered="refreshStatus" @touchmove.stop
			@scrolltolower="scrolltolower">
			<view class="list" v-if="goodsList.length > 0">
				<view class="item" v-for="(item,index) in goodsList" :key="item.id">
					<view class="line">
						入库编号：{{ item.number }}
					</view>
					<view class="line">
						采购金额：{{ item.totalMoney }} 元
					</view>
					<view class="line">
						入库种类：{{ item.totalNum }} 
					</view>
					<view class="line">
						入库时间：{{ item.inboundTime | parseTime }}
					</view>
					<view class="btn type-1" @click.stop="()=>{$navTo('./zyDetail',{id:item.id,status:'detail'});newPage = 'detail'}">详情</view>
				</view>
				<uni-load-more :status="loading" v-if="goodsList.length > 0"></uni-load-more>
			</view>
			<view style="width: 100%;height: 100%;background-color: #f7f7f7;display: flex;justify-content: center;align-items: center;"
				v-if="goodsList.length == 0">
				<image src="/static/index/nonedata.png" mode="aspectFill" style="width: 400rpx;height: 400rpx;"></image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { reqSelfList } from '@/apis/goods.js'
	export default {
		name: "ZyInWarehouse",
		data() {
			return {
				followNumber: '',
				goodsList: [],
				refreshStatus: false,
				loading: 'loading',
				page: {
					pageNum: 1,
					pageSize: 15,
					total: 0
				},
				newPage: 'detail',
			}
		},
		onLoad() {
			this.getOrderList();
		},
		onShow() {
			if (this.newPage == 'edit' || this.newPage == 'add') {
				this.goodsList = [];
				this.loading = 'loading';
				this.page = {
					pageNum: 1,
					pageSize: 15
				}
				this.getOrderList()
			}
			this.newPage = 'detail'
		},
		methods: {
			pulldownRefresh() {
				this.loading = 'loading';
				this.refreshStatus = true;
				this.page = {
					pageNum: 1,
					pageSize: 15,
					total: 0
				}
				this.goodsList = [];
				this.getOrderList();
			},
			scrolltolower() {
				console.log('触底');
				if (this.loading == "noMore") {
					return;
				}
				this.page.pageNum++;
				this.loading = "loading";
				this.getOrderList();
			},
			async getOrderList() {
				let { page: { pageNum, pageSize } } = this;
				let res = await reqSelfList({ pageNum, pageSize });
				if (res.code === 200) {
					const data = res.data;
					let arr = [...this.goodsList, ...data.list];
					const map = new Map();
					const newArr = arr.filter(v => !map.has(v.id) && map.set(v.id, v));
					this.goodsList = newArr;
					if (res.data.isLastPage) {
						this.loading = "noMore";
					}
					this.refreshStatus = false;
				}
			},
			addFbInwarehouse() {
				this.$navTo('./zyDetail', { status: 'add' })
				this.newPage = 'add';
			}
		},
	}
</script>

<style>
	page {
		background: #f7f7f7;
	}
</style>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
	}

	.search {
		height: 80rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background-color: #fff;

		.input {
			width: 60%;

			/deep/ .uni-easyinput__content-input {
				height: 50rpx !important;
				line-height: 50rpx !important;
			}
		}

		.icon-scan {
			margin-left: auto;
		}

		.btn {
			width: 90rpx;
			height: 50rpx;
			margin-left: 20rpx;
			line-height: 50rpx;
			text-align: center;
			border-radius: 5rpx;
		}
	}

	.list {
		padding: 20rpx 20rpx;
		padding-bottom: 0;

		.item {
			padding: 20rpx 24rpx;
			background-color: #fff;
			border-radius: 8rpx;
			margin-bottom: 20rpx;
			position: relative;

			&:nth-last-child(2) {
				margin-bottom: 0;
			}

			.line {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: $uni-font-size-small;
				color: #333;
				// margin-bottom: 10rpx;
				height: 50rpx;
			}

			.btn {
				width: 120rpx !important;
				position: absolute;
				font-size: $uni-font-size-small;
				text-align: center;
				border-radius: 5rpx;
				height: 60rpx;
				box-sizing: border-box;
				line-height: 60rpx;
				bottom: 20rpx;
				right: 24rpx;
			}
		}
	}
</style>